import React, { Component } from 'react'



class Header extends Component {

  // 类组件可以通过静态属性的方式来定义默认 props
  // static defaultProps = {
  //   num: 100
  // }

  render() {
    return <header>头部组件 -- {this.props.name} -- {this.props.num + 1} </header>
  }
}
// 设置默认的 props 
Header.defaultProps = {
  num: 100
}

function Content(props) {
  return (<>
    <h1>内容组件 -- {props.title} -- {props.abc} </h1>
  </>)
}
// 函数式组件设置默认值的方法
Content.defaultProps = {
  abc: '你笑起来真好看'
}

export default class App extends Component {

  state = {
    title: '辣条'
  }
  render() {
    return (
      <div>
        父级组件
        <hr />
        <Header name={this.state.title} />

        <hr />

        <Content user={{
          name: '张三',
          age: 18,
          sex: false
        }}
          title='嘿嘿嘿嘿'
        />

      </div>
    )
  }
}
